import { Layout, Menu,Select   } from 'antd';
import {  message } from 'antd';
import React from 'react';

import  AllRecordSerch from './content/allRecordSerch';
import  StudentSerch from './content/studentSerch';
import  TeacherSerch from './content/teacherSerch';

const { Option } = Select;
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class MainPage extends React.Component{

    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            content : ""
        };

        this.menuChange = this.menuChange.bind(this);
    }

    //在组件已经被渲染到 DOM 中后运行
    componentDidMount() {
    }

    //组件卸载时运行
    componentWillUnmount() {
    }

    menuChange(key){
        this.setState({content:key});
        switch(key){
            case "全部查询":
                this.setState({content:<AllRecordSerch/>});
                break;
            case "按学生索引查询":
                this.setState({content:<StudentSerch/>});
                break;
            case "按教师索引查询":
                this.setState({content:<TeacherSerch/>});
                break;
            default:
                this.setState({content:""});
                break;
        }
    }

    //组件加载时运行
    render() {
        return (
            <Layout>
                <Header className="header">

                    <Select defaultValue="MySQL" style={{ width: 120 }}
                            onChange={
                                (value)=>{
                                    console.info(value);
                                    fetch("http://localhost:80/search/changeDB?changeToWhat="+value,{
                                        method: 'GET',
                                        headers: Headers,
                                        'mode': 'cors'
                                    })
                                        .then(res => {
                                            console.log(res);
                                            if(res.status !== 200){
                                                message.success('切换失败');
                                                this.setState({content:""});
                                            }else{

                                            }
                                            return res.json();
                                        })
                                        .then(data => {
                                            if(data === true){
                                                message.success('切换成功');
                                                this.setState({content:""});
                                            }else {
                                                message.success('切换失败');
                                                this.setState({content:""});
                                            }
                                        });
                                }
                            }
                    >
                        <Option value="MySQL">MySQL</Option>
                        <Option value="SqlServer">SqlServer</Option>
                    </Select>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                            onClick={({ item, key, keyPath, domEvent })=>{this.menuChange(key)}}
                        >
                            <SubMenu key="消费流水查询" title="消费流水查询">
                                <Menu.Item key="全部查询">全部流水查询</Menu.Item>
                                <Menu.Item key="按学生索引查询">按学生索引查询</Menu.Item>
                                <Menu.Item key="按教师索引查询">按教师索引查询</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 0px 24px' }}>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: document.documentElement.clientHeight - 88,
                            }}
                        >
                            {this.state.content}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        );
    }

}